<template>
  <div>
    <el-dialog
      title="新增指令服务"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        :model="addInfo"
        :rules="rules"
        ref="refAddInfo"
        label-width="100px"
      >
        <el-form-item size="small" label="产品类型" prop="productId">
          <el-select
            v-model="addInfo.productId"
            placeholder="请选择"
            style="width: 100%"
            @change="onChange"
          >
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="产品型号" prop="productModel">
          <el-select
            v-model="addInfo.productModel"
            placeholder="请选择"
            style="width: 360px"
            @change="onChange2"
          >
            <el-option
              v-for="item in productModelList"
              :key="item.model"
              :label="item.model"
              :value="item.model"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="通信协议" prop="protocol">
          <el-select
            v-model="addInfo.protocol"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in protocolList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="服务标识" prop="serviceType">
          <el-input
            clearable
            placeholder="请输入"
            v-model="addInfo.serviceType"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="服务名称" prop="serviceName">
          <el-input
            clearable
            placeholder="请输入"
            v-model="addInfo.serviceName"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="参数名称" prop="paramName">
          <el-input
            clearable
            placeholder="请输入"
            v-model="addInfo.paramName"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="标识符" prop="identifier">
          <el-input
            clearable
            placeholder="请输入"
            v-model="addInfo.identifier"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="输入类型" prop="inputType">
          <el-radio v-model="addInfo.inputType" label="1">文本填充</el-radio>
          <el-radio
            v-model="addInfo.inputType"
            label="2"
            style="margin-left: 20px"
            >下拉选择</el-radio
          >
        </el-form-item>
        <el-form-item
          size="small"
          label="取值范围"
          v-show="addInfo.inputType == '1'"
        >
          <el-input-number
            size="mini"
            v-model="num1"
            :min="0"
            :max="998"
          ></el-input-number
          ><span class="test">至</span>
          <el-input-number
            size="mini"
            v-model="num2"
            :min="1"
            :max="999"
          ></el-input-number>
        </el-form-item>

        <el-form-item
          size="small"
          label=""
          v-show="addInfo.inputType == '2'"
          v-for="(domain, index) in addInfo.dataDefinition2"
          :key="index"
        >
          <div style="display: flex; justify-content: space-between">
            <el-input
              type="input"
              maxlength="15"
              v-model.trim="domain.key"
              style="width: 40%"
              placeholder="消音"
            >
            </el-input>
            <el-input
              type="input"
              style="width: 40%"
              maxlength="5"
              v-model.trim="domain.value"
              :placeholder="index + 1"
            ></el-input>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
              >
                <i
                  class="el-icon-remove-outline zuobiao2"
                  @click.prevent="removeFloor(domain)"
                ></i>
              </el-tooltip>
            </div>
          </div>
        </el-form-item>

        <el-form-item
          size="small"
          v-show="
            addInfo.inputType == '2' && addInfo.dataDefinition2.length < 10
          "
        >
          <el-tooltip
            class="item"
            effect="dark"
            content="新增"
            placement="bottom"
          >
            <i
              class="el-icon-circle-plus-outline zuobiao2"
              @click="addFloor"
            ></i>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          v-preventReClick="1500"
          class="confirm-button"
          @click="addSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqProductList,
  reqCommandServiceadd,
  reqProductModelPage,
} from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "add",
  mixins: [],
  components: {},
  data() {
    return {
      dialogVisible: false,
      addInfo: {
        productId: "",
        productModel: "",
        protocol: "",
        serviceType: "",
        serviceName: "",
        paramName: "",
        identifier: "",
        inputType: "1",
        dataDefinition1: "",
        dataDefinition2: [
          {
            key: "",
            value: "",
          },
        ],
      },
      num1: 1,
      num2: 100,
      // 表单验证规则
      rules: {
        productId: [
          { required: true, message: "请选择产品类型", trigger: "change" },
        ],
        productModel: [
          { required: true, message: "请选择产品型号", trigger: "change" },
        ],
        protocol: [
          { required: true, message: "请选择通信协议", trigger: "change" },
        ],
        serviceType: [
          { required: true, message: "请输入服务标识", trigger: "blur" },
        ],
        serviceName: [
          { required: true, message: "请输入服务名称", trigger: "blur" },
        ],
        paramName: [
          { required: true, message: "请输入参数名称", trigger: "blur" },
        ],
        identifier: [
          { required: true, message: "请输入标识符", trigger: "blur" },
        ],
      },
      productList: [],
      productModelList: [],
      protocolList: [
        {
          id: 1,
          name: "电信物模型标准规范",
        },
        {
          id: 2,
          name: "移动铠湾规范",
        },
        {
          id: 3,
          name: "移动安消规范",
        },
        {
          id: 6,
          name: "声光规范",
        },
        {
          id: 7,
          name: "珠海慧芯",
        },
      ],
      selectedItem: {
        deviceType: "1",
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    removeFloor(item) {
      // console.log(this.addInfo.floorsId.length);
      if (this.addInfo.dataDefinition2.length == 1) return;
      var index = this.addInfo.dataDefinition2.indexOf(item);
      if (index !== -1) {
        this.addInfo.dataDefinition2.splice(index, 1);
      }
    },
    addFloor() {
      this.addInfo.dataDefinition2.push({
        key: "",
        value: "",
      });
    },
    //   获取产品列表
    async getProductList() {
      const res = await reqProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.productList = res.data.rows;
    },
    onChange(e) {
      // console.log(e);
      this.addInfo.productModel = "";
      this.productModelList = [];
      this.selectedItem = this.productList.find((item) => item.id === e);
      if (this.selectedItem.deviceType == "Camera") {
        this.protocolList = [
          {
            id: 4,
            name: "萤石协议",
          },
          {
            id: 5,
            name: "国标协议",
          },
        ];
      } else {
        this.protocolList = [
          {
            id: 1,
            name: "电信物模型标准规范",
          },
          {
            id: 2,
            name: "移动铠湾规范",
          },
          {
            id: 3,
            name: "移动安消规范",
          },
          {
            id: 6,
            name: "声光规范",
          },
          {
            id: 7,
            name: "珠海慧芯",
          },
        ];
      }
      this.ProductModelPage();
    },
    onChange2(val) {
      this.addInfo.protocol = "";
      if (this.selectedItem.deviceType == "Camera") {
        if (val == "V380") {
          this.protocolList = [
            {
              id: 5,
              name: "国标协议",
            },
          ];
        } else {
          this.protocolList = [
            {
              id: 4,
              name: "萤石协议",
            },
            {
              id: 5,
              name: "国标协议",
            },
          ];
        }
      } else {
        this.protocolList = [
          {
            id: 1,
            name: "电信物模型标准规范",
          },
          {
            id: 2,
            name: "移动铠湾规范",
          },
          {
            id: 3,
            name: "移动安消规范",
          },
          {
            id: 6,
            name: "声光规范",
          },
          {
            id: 7,
            name: "珠海慧芯",
          },
        ];
      }
    },
    // 获取产品型号
    async ProductModelPage() {
      let res = await reqProductModelPage(1, 50, {
        productId: this.addInfo.productId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.productModelList = res.data.rows;
    },
    addSubmit() {
      this.$refs.refAddInfo.validate(async (valid) => {
        if (valid) {
          if (this.addInfo.inputType == "1") {
            this.addInfo.dataDefinition1 = this.num1 + "," + this.num2;
          }
          delete this.addInfo.productId; // 使用 delete 运算符删除 productId 属性
          const res = await reqCommandServiceadd(this.addInfo);
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("新增指令成功");
          this.closeEditDialog();
          this.$parent.getCommandServicePage(); //更新
        }
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.$refs.refAddInfo.resetFields();
      this.addInfo = {
        productId: "",
        productModel: "",
        protocol: "",
        serviceType: "",
        serviceName: "",
        paramName: "",
        identifier: "",
        inputType: "1",
        dataDefinition1: "",
        dataDefinition2: [
          {
            key: "",
            value: "",
          },
        ],
      };
      this.num1 = 1;
      this.num2 = 100;
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 2016;
  // background: red;
  // opacity: 0.5;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 下拉框加载结束
// 单选按钮
::v-deep .el-radio {
  color: @primaryThemeTxtColor2;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #7367f0;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #7367f0;
  background: #7367f0;
}

// 取值范围
::v-deep .el-input-number__decrease {
  color: #fff;
  background: #7367f0;
  border-right: 0;
}

::v-deep .el-input-number__increase {
  border-left: 0;
  color: #fff;
  background: #7367f0;
}

.test {
  color: @primaryThemeTxtColor2;
  margin: 0 10px;
}

.zuobiao2 {
  color: @primaryTxtcolor;
  font-size: 20px;
  cursor: pointer;
}
</style>